<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #aaaaaa;
        }

        .container {
            width: 1200px;
            margin: 100px 800px;
            height: 500px;
        }

        p {
            font-size: 15px;
        }

        .box {
            border: 1px solid white;
            background-color: white;
            width: 388px;
            text-align: center;
            padding-top: 5px;
            display: flex;
            position: absolute;
           
        }

        .active {
           left: 15px;
            position: relative;
            overflow: hidden;
        }

        .active p {
            width: 170px;
            height: 170px;
           
            color: black;
            position: absolute;
           top: 0;
           left: 0;
            left: -170px;
            /* top: -16px;
            left: -170px; */
             /* opacity: 0;  */
            /* transition:  all 0.3s linear; */
        }

        /* .active p:hover {
            opacity: 0.8;
            transform: rotate3d(360deg);
        } */

        .current {
             overflow: hidden;
            position: relative;
            left: 35px;
        }

        .current p {
          width: 100%;
        height: 100%;
            position: absolute;
           top: 0;
           left: 0;
            color: black;
         left: -170px;
        }

        /* .current>p:hover {
            opacity: 0.8;
        } */
       .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000;
            display: none;
        }
        .big{
        background-color: white;
        padding: 10px;
        position: relative;
        width: 388px;
    }
    .big .overlay{
        border: 5px solid orange;
        display: none;
    }
    .big .overlay{
        border: 5px solid orange;
        display: none;
    }
       .big p{
        padding: 10px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="big">
        <img src="./img/1.jpg" alt="">
         <p>
                关注小米手机的网友一定记得，在小米5X的发布会上，雷总在介绍这款手机的拍照效果时，强调了“一点去人”，“一滑去线”这两个小功能。简单来说就是我们日常的照片经常会出现有路人碰巧入镜以及无法避免天线入镜的情况。通过这两个功能可以让照片中的画面更好看，实话实话这功能虽小但确实很实用。
         </p>
             <div class="overlay"></div>
            </div>
        <div class="box">
            <span class="active">
            <img src="./img/2.jpg" alt="" id="active">
    <p  class="first"><br>special品牌旗舰店<br><br>最具传奇浪漫色彩的欧洲设计，给你带来专属的魅力</p>
   <div class="overlay"></div>   
</span>
            <div class="current">
                <img src="./img/3.jpg" alt="" id="current">
                <p class="second"><br>sophy橡菲旗舰店<br><br>新款韩版微笑性感红唇<br>上衣圆领女短袖修身T恤</p>
             <div class="overlay"></div> 
            </div>
        </div>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
 $('.big').hover(function(){
        console.log(123);
        $(this).find('.overlay').stop().fadeTo(500,0.5);
    },function(){
        $(this).find('.overlay').stop().fadeTo(500,0);
    });



 $('.active').hover(function () {
        $(this).find('.overlay').stop().fadeTo(500, 0.5);
        $(this).find('.first').stop().animate({ left: 0 }, 300);
    }, function () {
        $(this).find('.overlay').stop().fadeTo(500, 0);
        $(this).find('.first').stop().animate({ left: -170 }, 300);
    })

$('.current').hover(function () {
        $(this).find('.overlay').stop().fadeTo(300, 0.5);
        $(this).find('.second').stop().animate({ left: 0 }, 300);
    }, function () {
        $(this).find('.overlay').stop().fadeTo(300, 0);
        $(this).find('.second').stop().animate({ left: -170 }, 300);
    })



</script>